<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>placeholder 效果的实现</title>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
</head>
<style>
body {
	font-size: 12px;
}
div {
	position: relative;
}
.userName-group, .pswd-group {
	width: 153px;
	height: 24px;
	margin-bottom:10px;
}
label {
	margin-left:3px;
	line-height: 24px;
	z-index: 1;
	color: #999;
}
.userName-group input, .pswd-group input {
	position: absolute;
	top: 0;
	left:0;
	width: 153px;
	height:22px;
	border:1px solid #bbb;
	z-index: 999;
	background-color: transparent;
}
</style>
<body>
<h1>placeholder 效果</h1>
<input type="text" placeholder="用户名">
<input type="password" placeholder="密码">
<h1>placeholder 效果的实现</h1>
<div class="userName-group">
	<label for="username">用户名</label>
	<input type="text" id="username">
</div>
<div class="pswd-group">
	<label for="password">密码</label>
	<input type="password" id="password">
</div>
<script>

/*$(function(){	
	var input=$("input"),
		len=input.length;
	for(var i=0;i<len;i++){//判断浏览器是否记住信息
		var val=input.eq(i).val();
		if(val!==''){
			input.eq(i).prev('label').hide();
		}
	}
	$("label").click(function(){
		$(this).next().focus();
	})	
	$("#username,#password").keydown(function(){
		$(this).prev().hide();
	}).blur(function(){
		var _this=$(this);
		if (_this.val() == ''){
			_this.prev().show();
		}
	});
})*/

//判断浏览器
var Sys = {};
var ua = navigator.userAgent.toLowerCase();
if (window.ActiveXObject){
	Sys.ie = ua.match(/msie ([\d.]+)/)[1];
}
//else if (document.getBoxObjectFor){
//	Sys.firefox = ua.match(/firefox\/([\d.]+)/)[1];
//}else if (window.MessageEvent && !document.getBoxObjectFor){
//	Sys.chrome = ua.match(/chrome\/([\d.]+)/)[1];
//}else if (window.opera){
//	Sys.opera = ua.match(/opera.([\d.]+)/)[1];
//}else if (window.openDatabase){
//	Sys.safari = ua.match(/version\/([\d.]+)/)[1];
//}

window.onload=function(){	
	var	input=document.getElementsByTagName('input'),
		label=document.getElementsByTagName('label'),
		username=document.getElementById('username'),
		pwd=document.getElementById('password'),
		len=input.length;
		
	for(var i=0;i<len;i++){
		var val=input.item(i).value,
			div=input.item(i).parentNode;
		if(val!==''){
			label_s_h(div,'none');
		}
	}
	label.onclick=function(){
		this.nextSibling('input').focus;	
	}

	username.onkeydown=pwd.onkeydown=function(){
		var div=this.parentNode;
			label_s_h(div,'none');
	}
	username.onblur=pwd.onblur=function(){
		var _this=this,
			div=this.parentNode,
			val=_this.value;
		if(val==''){
			label_s_h(div,'block');
		}
	}
}
s=Sys.ie||'';//没有空s为undefined
function label_s_h(o,d){
	/*if(s=='6.0'||s=='7.0'||s=='8.0'){
		//s.indexOf('6'||'7'||'8')>0不知道为什么这样不对 ？？
		//s=='6.0'||'7.0'||'8.0' 写在label_s_h()函数里判断就出错，chrome下也执行到这里，不写在函数里是对的
		o.firstChild.style.display=d;//不知道为什么不能用.previousSibling ？？
		
	}else{
		o.childNodes[1].style.display=d;//不知道为什么ie9以上和chrome不支持firstChild ？？？
	}*/
	s=='6.0'||s=='7.0'||s=='8.0'?o.firstChild.style.display=d:o.childNodes[1].style.display=d;
}

</script>
</body>
</html>
